<template>
  <div v-loading="loading"
       style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 20px">
    <!--<div id="wx_qrcode" style="display: flex; justify-content: center"></div>-->
    <div style="height: 258px; width: 258px; position: relative">
      <qriously :value="codeUrl" :size="258"/>

      <div class="refresh_box" v-show="showRefresh">
        <div class="refresh_box_btn" @click="initWxLoginObj">
          <el-icon class="icon el-icon-refresh"></el-icon>
          <span style="font-size: 14px; margin-top: 10px">二维码过期，请刷新</span>
        </div>
      </div>
    </div>
    <div>请用微信扫一扫，关注并登录</div>
  </div>
</template>

<script>
  import api from '@/utils/api.js'
  import {setToken} from '@/utils/auth'
  export default {
    name: 'wxLogin',
    data () {
      return {
        codeUrl: '',
        key: '',
        wxLoginObj: {},
        expireSeconds: 1,
        loading: true,
        countInterval: '',
        checkKeyInterval: '',
        showRefresh: false
      }
    },
    mounted () {
      this.initWxLoginObj()
    },
    methods: {
      initWxLoginObj () {
        this.loading = true
        api.getPcLoginCode({scene: 'LOGIN'}).then(res => {
          let {url, key, expireSeconds} = res.data
          this.codeUrl = url
          this.key = key
          this.expireSeconds = expireSeconds
          this.loading = false
          this.checkLoginByKey()
          this.countExpireSeconds()
          this.showRefresh = false
        })
        /*this.wxLoginObj = new WxLogin({
          id: `wx_qrcode`,
          appid: 'wx2afc6b1a3cf1296a',
          scope: `snsapi_login`,
          redirect_uri: 'https://www.yihui.online/portal/',
          state: '5201314',
          href: 'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30='
        });*/
      },
      // 倒计时过期
      countExpireSeconds () {
        this.countInterval = setInterval(() => {
          this.expireSeconds--
          if (this.expireSeconds < 1) {
            clearInterval(this.countInterval)
            clearInterval(this.checkKeyInterval)
            this.showRefresh = true
          }
        }, 1000)
      },
      // pc二维码校验登录
      checkLoginByKey () {
        this.checkKeyInterval = setInterval(() => {
          api.checkLoginByKey({key: this.key}).then(res => {
            if (api.SUCCESS.includes(res.code)) {
              setToken(res.data.accessToken)
              clearInterval(this.checkKeyInterval)
              this.$emit('loginSuccess')
            }
          })
        }, 3800)
      }
    }
  }
</script>

<style lang="scss">
  .refresh_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #3E8EF7;
    .refresh_box_btn {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }
  }
</style>
